<template>
  <transition name="fade-transform" mode="out-in">
    <div id="main" />
  </transition>
</template>
<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      chartDom: null,
      myChart: null,
      option: null,
      bk: '#FFF'
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.myChart = echarts.init(this.$el)
      this.option
      const data = []
      let a = 0
      for (var i = 0; i <= 100; i++) {
        var theta = i / 100 * 360
        var r = parseInt(Math.random() * 150)
        if (a < 0) {
          a += r
        } else if (a >= 0 && a < 360) {
          a -= r
        }
        data.push([a, theta])
      }

      var CLUSTER_COUNT = 6
      var COLOR_ALL = [
        '#37A2DA', '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
      ]
      var pieces = []
      for (var i = 0; i < CLUSTER_COUNT; i++) {
        pieces.push({
          value: i,
          label: 'cluster ' + i,
          color: COLOR_ALL[i]
        })
      }
      this.option = {
        title: {
          text: '平面东向/北向坐标展示图(mm)'
        },
        polar: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        angleAxis: {
          type: 'value',
          startAngle: 0
        },
        radiusAxis: {
        },
        series: [{
          coordinateSystem: 'polar',
          name: 'line',
          type: 'line',
          data: data
        }]
      }
      this.option && this.myChart.setOption(this.option)
    }
  }
}
</script>

<style lang="scss" scoped>
#main {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>
